<template>
  <div v-loading="loading" class="clinicalDiagnosis">

    <div class="chiefComplaintForm lm-add-message">
      <el-form ref="form" :model="form" label-width="120px">
        <template v-for="item in pageConf">
          <div :key="item.id + '_item'" class="chiefComplaintContent">
            <h3>{{ item.title }}</h3>
            <template v-for="conf in item.formConfigItems">
              <el-form-item :key="conf.id + '_conf'" :label="conf.itemTitle">
                <template v-if="conf.required!==2">
                  <el-radio-group v-if="conf.itemType === 'radio'" v-model="conf.values" @change="changeRadio(conf)">
                    <el-radio v-for="i in conf.itemValues" :key="i" :label="i"></el-radio>
                  </el-radio-group>
                  <el-input-number v-else-if="conf.itemType === 'input_number'" v-model="conf.values"></el-input-number>
                  <el-input v-else-if="conf.itemType !== 'radio'" v-model="conf.values" class="lm-inpput" :type="conf.itemType.toLowerCase()" :class="{'paientInput':conf.itemType==='textArea'}" placeholder="请输入文字"></el-input>
                  <!-- TODO 针对接口数据渲染情况下可以这么使用,后续优化 -->
                  <template v-if="conf.required===1">{{ addNotEmpty(conf) }}</template>
                  <MustAdd v-if="!!conf.required"></MustAdd>
                </template>
                <template v-else>
                  <el-radio-group v-if="conf.itemType === 'radio' && showDep(conf)" v-model="conf.values" @change="changeRadio(conf)">
                    <el-radio v-for="i in conf.itemValues" :key="i" :label="i"></el-radio>
                  </el-radio-group>
                  <el-input-number v-else-if="conf.itemType === 'input_number' && showDep(conf)" v-model="conf.values"></el-input-number>
                  <!-- TODO 针对接口数据渲染情况下可以这么使用 ,后续优化  -->
                  {{ addDepMap(conf) }}
                </template>
                <!-- <MustAdd v-if="!!conf.required"></MustAdd> -->
              </el-form-item>
            </template>
          </div>
        </template>
      </el-form>
    </div>

  </div>
</template>

<script>
import { getPageConf } from '@/api/patient';
import MustAdd from './MustAdd';
export default {
  name: 'ClinicalDiagnosis',
  components: {
    MustAdd
  },
  data() {
    return {
      form: {
        desc: '',
        desc0: '',
        radio1: [
          { radioName: '鼻咽部疾病：', radioValue: ['有', '无'], radioModel: '' },
          { radioName: '过敏史：', radioValue: ['有', '无', '其他'], radioModel: '' },
          { radioName: '喂养方式：', radioValue: ['母乳', '奶瓶', '混合'], radioModel: '' }
        ],
        baHadit: { type: [], hadit: ['无', '打鼾', '吮指', '咬物', '吮颊', '口呼吸'] },
        radio2: [
          { radioName: '全身病史：', radioValue: ['有', '无'], radioModel: '' },
          { radioName: '家族遗传史：', radioValue: ['反颌', '小下颌畸形(鹰嘴)', '其他', '无'], radioModel: '' },
          { radioName: '治疗动机：', radioValue: ['父母意愿', '自身意愿'], radioModel: '' }
        ],
        radio3: [
          { radioName: '正面观：', radioValue: ['左右基本对称', '左右不对称'], radioModel: '' },
          { radioName: '上唇：', radioValue: ['正常', '过短'], radioModel: '' },
          { radioName: '唇肌：', radioValue: ['正常', '紧张'], radioModel: '' },
          { radioName: '下颌骨：', radioValue: ['正常', '左偏', '右偏'], radioModel: '' },
          { radioName: '呼吸方式：', radioValue: ['鼻呼吸', '口呼吸'], radioModel: '' }
        ],
        radio4: [
          { radioName: '侧貌：', radioValue: ['直', '凹', '凸'], radioModel: '' },
          { radioName: '鼻唇沟：', radioValue: ['锐角', '钝角'], radioModel: '' },
          { radioName: '颏肌：', radioValue: ['正常', '紧张'], radioModel: '' },
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '吞咽方式：', radioValue: ['正常', '婴儿式吞咽'], radioModel: '' }
        ],
        radio5: [
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '舌体大小：', radioValue: ['正常', '大', '齿痕'], radioModel: '' },
          { radioName: '唇系带附着：', radioValue: ['正常', '低'], radioModel: '' },
          { radioName: '扁桃体：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        radio6: [
          { radioName: '关节弹响：', radioValue: ['无', '左有', '右有', '左右都有'], radioModel: '', boo: true },
          { radioName: '颞下颌关节：', radioValue: ['正常', '左异常', '右异常', '左右都异常'], radioModel: '', boo: true },
          { radioName: '颌干扰：', radioValue: ['无', '有'], radioModel: '', boo: false },
          { radioName: '舌体位置：', radioValue: ['正常', '偏前', '偏下'], radioModel: '', boo: true }
        ],
        radio7: [
          { radioName: '咬上颌腭部黏膜：', radioValue: ['是', '否'], radioModel: '' },
          { radioName: '反颌下颌可退至切对切：', radioValue: ['是', '否'], radioModel: '' },
          { radioName: '上颌牙弓：', radioValue: ['正常', '狭窄'], radioModel: '' },
          { radioName: '磨牙关系左：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '尖牙关系左：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '前牙覆颌：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        radio8: [
          { radioName: '牙周炎症：', radioValue: ['无', '有'], radioModel: '' },
          { radioName: '', radioValue: [], radioModel: '' },
          { radioName: '下颌弓牙：', radioValue: ['正常', '狭窄'], radioModel: '' },
          { radioName: '磨牙关系右：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '尖牙关系右：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '无法确定'], radioModel: '' },
          { radioName: '前牙覆盖：', radioValue: ['Ⅰ', 'Ⅱ', 'Ⅲ', '正常'], radioModel: '' }
        ],
        input: [
          { inputName: '开口度', inputModel: '' },
          { inputName: '开口型', inputModel: '' },
          { inputName: '闭口型', inputModel: '' }
        ],
        input1: [
          { inputName: '锁合牙', inputModel: '' },
          { inputName: '融合牙', inputModel: '' },
          { inputName: '乳牙缺失', inputModel: '' },
          { inputName: '多生牙', inputModel: '' },
          { inputName: '扭转牙', inputModel: '' }
        ],
        input2: [
          { inputName: '畸形中央尖：', inputModel: '' },
          { inputName: '先天恒牙胚缺失：', inputModel: '' },
          { inputName: '根尖发育异常牙：', inputModel: '' },
          { inputName: '冠根比≤1的牙：', inputModel: '' }
        ],
        input3: [
          { inputName: 'CBCT线检查日期：', inputModel: '' },
          { inputName: 'CBCT线检查诊断：：', inputModel: '' },
          { inputName: '颞颌关节检查日期：', inputModel: '' },
          { inputName: '颞颌关节检查诊断：：', inputModel: '' }
        ],
        inputModel: '',
        desc1: '',
        desc2: ''
      },
      pageConf: [],
      dependentMap: {},
      dependForPid: {},
      isNotEmpty: {},
      loading: false
    };
  },
  mounted() {
    this.loading = true;
    getPageConf().then(res => {
      this.pageConf = res;
      this.loading = false;
    });
    this.dependentMap = {};
    this.dependForPid = {};
    this.isNotEmpty = {};
  },
  methods: {
    showDep(conf) {
      return conf.show;
    },
    addNotEmpty(item) {
      if (!this.isNotEmpty[item.id]) {
        this.isNotEmpty[item.id] = item;
      }
      return;
    },
    addDepMap(item) {
      if (!this.dependentMap[item.id]) {
        this.dependentMap[item.id] = item;
      }
      if (!this.dependentMap[item.dependentItem]) {
        this.dependForPid[item.dependentItem] = item;
      }
      return '';
    },
    changeRadio(item) {
      if (this.dependForPid[item.id]) {
        const showItem = this.dependForPid[item.id];
        showItem.show = !showItem.show;
      }
      console.warn(item);
    }

  }
};
</script>
<style lang="scss" scoped>
.clinicalDiagnosis{
  .chiefComplaintForm{
   .el-form{
    min-height: 500px;
    width: 100%;
    .chiefComplaintContent{
    .el-form-item{
      min-width:500px;
      max-width: calc(600px + 120px);
    }
    }
    .chiefComplaintContent:first{
      padding-top: 0px;
    }
  }
  }
}

</style>
<style lang="scss">
.clinicalDiagnosis{
  padding:0 0 40px 0px;
  //   .el-input__inner{
  //   display: inline-block;
  //   width: 500px;
  //   border-radius: 6px;
  //   background: #F2F2F2;
  //   border: 1px solid #E6E6E6;
  // }
  .lm-inpput{
    .el-input__inner{
      width: 500px;
    }
  }
  .chiefComplaintContent{
    width: 100%;
    padding:20px 30px 20px 30px;
    border-bottom: 1px #E6E6E6 solid ;
  }
  .chiefComplaintContent:first-child{
    padding:0px 30px 20px 30px;
  }
}
.clinicalDiagnosis h3{
  font-size: 16px;
}
.clinicalDiagnosis .chiefComplaintContent:last-of-type{
  border-bottom:none;
}
.clinicalDiagnosis .paientInput{
  width: 500px;
  height: 70px;
  vertical-align: top;
  background: #F2F2F2;
  border-radius: 6px;
}
.clinicalDiagnosis
.clinicalDiagnosis .paientInput::placeholder{
  color: #CCCCCC;
}
.clinicalDiagnosis .el-textarea__inner{
  background: #F2F2F2;
  border: none;
  height: 100%;
  padding: 12px 16px;
}
.clinicalDiagnosis  .chiefComplaintContentFlex{
  display: flex;
}
.clinicalDiagnosis  .chiefComplaintContentFlex .right .el-form-item:last-of-type .mustAdd{
  display: none;
}
.clinicalDiagnosis .noneInput{
  display: none;
}
.clinicalDiagnosis  .docSay{
  height: 103px;
}
.clinicalDiagnosis .el-form-item__label{
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #999999;
  width: 120px!important;
}
/* .clinicalDiagnosis .el-input__inner{
  width: 500px;
  height: 42px;
  background: #F2F2F2;
  border: 1px solid #E6E6E6;
  opacity: 1;
  border-radius: 6px;
} */
</style>
